<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>新建活动行程</title>
    <link href="themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script>
    <script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
    <link href="<%=path %>/assets2/css/bootstrap.min.css" rel="stylesheet">
    <script src="<%=path %>/assets2/js/jquery.form.js"></script>
    <script src="<%=path %>/assets2/js/bootstrap.js"></script>
    <link href="<%=basePath%>/assets2/js/layer/theme/default/layer.css" rel="stylesheet" type="text/css">
	<script src="<%=basePath%>/assets2/js/layer/layer.js"  type="text/javascript"></script>
	<script src="<%=basePath%>/assets2/js/layer/laydate/laydate.js"  charset="utf-8" type="text/javascript"></script>
	<script src="<%=basePath%>/assets2/js/layui/layui.all.js"  type="text/javascript"></script>
	<link href="<%=basePath%>/assets2/js/layui/css/layui.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
        h1{
            font-family: "微软雅黑";
            font-weight: normal;
        }
        .btn {
            display: inline-block;
            *display: inline;
            padding: 4px 12px;
            margin-bottom: 0;
            *margin-left: .3em;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            *background-color: #e6e6e6;
            background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
            background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
            background-repeat: repeat-x;
            border: 1px solid #cccccc;
            *border: 0;
            border-color: #e6e6e6 #e6e6e6 #bfbfbf;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border-bottom-color: #b3b3b3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            *zoom: 1;
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn:hover,
        .btn:focus,
        .btn:active,
        .btn.active,
        .btn.disabled,
        .btn[disabled] {
            color: #333333;
            background-color: #e6e6e6;
            *background-color: #d9d9d9;
        }

        .btn:active,
        .btn.active {
            background-color: #cccccc \9;
        }

        .btn:first-child {
            *margin-left: 0;
        }

        .btn:hover,
        .btn:focus {
            color: #333333;
            text-decoration: none;
            background-position: 0 -15px;
            -webkit-transition: background-position 0.1s linear;
            -moz-transition: background-position 0.1s linear;
            -o-transition: background-position 0.1s linear;
            transition: background-position 0.1s linear;
        }

        .btn:focus {
            outline: thin dotted #333;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .btn.active,
        .btn:active {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn.disabled,
        .btn[disabled] {
            cursor: default;
            background-image: none;
            opacity: 0.65;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
    </style>
</head>
<body style="margin:0 auto;width:1000px;background-color: #eeeeee;">
<br><br>
<h3 style="text-align: center;">新建活动行程</h3><br><br>
<form class="layui-form" id="fm" action="<%=basePath %>liveManager/addActivityInfo"  method="post" enctype="multipart/form-data">
	<div class="row">
		<div class="col-md-12">
			<div class="col-md-6 form-group">
				<label for="title" class="col-md-3 control-label">活动标题：</label>
                <div class="col-md-9">
                    <input type="text" name="title" id="title" class="form-control" placeholder="请输入活动标题~" maxlength="20"  lay-verify="required">
                </div>
			</div>
			<div class="col-md-6 form-group">
				<label for="activityPlace" class="col-md-3 control-label">活动地址：</label>
                <div class="col-md-9">
                    <input type="text" name="activityPlace" id="activityPlace" class="form-control" placeholder="请输入活动地址~"  lay-verify="required">
                </div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="col-md-6 form-group">
				<label for="activityTime" class="col-md-3 control-label">活动时间：</label>
                <div class="col-md-9">
	                <input type="text" name="activityTime" id="activityTime" class="form-control" placeholder="请选择活动时间~"  lay-verify="required">
                </div>
			</div>
			<div class="col-md-6 form-group">
				<label for="deadline" class="col-md-3 control-label">截止时间：</label>
                <div class="col-md-9">
                    <input type="text" name="deadline" id="deadline" class="form-control" placeholder="请选择截止时间~"  lay-verify="required">
                </div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="col-md-6 form-group">
				<label for="maxPeople" class="col-md-3 control-label">报名人数：</label>
                <div class="col-md-9">
	                <input type="text" name="maxPeople" id="maxPeople" class="form-control" placeholder="请输入报名人数~" maxlength="4" lay-verify="required|number">
                </div>
			</div>
			<div class="col-md-6 form-group">
				<label for="name" class="col-md-3 control-label">联系人：</label>
                <div class="col-md-9">
                    <input type="text" name="name" id="name" class="form-control" placeholder="请输入活动联系人名称~" maxlength="6s" lay-verify="required">
                </div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="col-md-6 form-group">
				<label for="phone" class="col-md-3 control-label">联系电话：</label>
                <div class="col-md-9">
	                <input type="text" name="phone" id="phone" class="form-control" placeholder="请输入活动联系人电话~" lay-verify="required|phone|number">
                </div>
			</div>
			<div class="col-md-6 form-group">
				<label for="email" class="col-md-3 control-label">联系邮箱：</label>
                <div class="col-md-9">
                    <input type="text" name="email" id="email" class="form-control" placeholder="请输入活动联系人邮箱~" lay-verify="required|email">
                </div>
			</div>
		</div>
	</div>
    <div class="layui-form-item col-md-12">
    	<label for="registrationWay" class="col-md-3 control-label">报名方式：</label>
	    <div class="col-md-9">
		    <div class="layui-input-block">
		      <input type="radio" name="registrationWay" value="0" title="网上报名" checked>&emsp;&emsp;
		      <input type="radio" name="registrationWay" value="1" title="线下报名" >
		    </div>
	    </div>
    </div><br><br><br>
	<div style="margin:0 auto;width:1000px;">
		<!--style给定宽度可以影响编辑器的最终宽度-->
		<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
     		<p>请输入活动内容~</p> 
 		</script> 
<!-- 		<textarea rows="" cols="" id="myEditor" style="width:1000px;height:240px;" placeholder="请输入活动内容~"  lay-verify="required"></textarea> -->
	</div>
	<div class="col-md-12">
		<label>活动照片</label>
		<input type="file" class="photo" name="photo1" id="photo1" style="display: none;">
		<input type="file" class="photo" name="photo2" id="photo2" style="display: none;">
		<input type="file" class="photo" name="photo3" id="photo3" style="display: none;">
		<input type="file" class="photo" name="photo4" id="photo4" style="display: none;">
		<input type="file" class="photo" name="photo5" id="photo5" style="display: none;">
		<input type="file" class="photo" name="photo6" id="photo6" style="display: none;">
		<div class="col-xs-1" id="addCertificatePhotoDiv">
			<img class="img-thumbnail"
				src="<%=path%>/assets2/img/tianjia.png"
				onclick="addCertificatePhoto()">
		</div>
	</div>
	<br>
	<div class="col-md-12" id="photoDiv">
			
	</div><br><br><br>
  <div class="layui-form-item">
    <div class="layui-input-block" style="text-align: center;">
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>&emsp;&emsp;
      <button class="layui-btn" lay-submit lay-filter="*" >立即提交</button>
    </div>
  </div>
</form>	


<script>
layui.use('form', function(){
	  var form = layui.form;
	  form.render();
	  form.on('submit(*)', function(data){
		  if(data.field.editorValue==null||data.field.editorValue==''){
			  layer.alert('活动内容为空~', {
				  icon: 5,
				  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
				})
			  return false;  
		  }else if($('#photo3').val()==null||$('#photo3').val()==''){
			  layer.alert('活动图片不得少于三张~', {
				  icon: 5,
				  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
				})
			  return false;  
		  }else{
			  sub();
			  return false;
		  }
// 		  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  });
	  //各种基于事件的操作，下面会有进一步介绍
	});
//日期时间范围
laydate.render({
  elem: '#activityTime'
  ,type: 'datetime'
  ,format:'yyyy-MM-dd HH点mm分'
  ,range: true
});
//时间选择器
laydate.render({
  elem: '#deadline'
  ,type: 'datetime'
});
//新建活动行程
function sub(){
	//加载层
	var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
	  $('#fm').ajaxSubmit({
			beforeSubmit:function(){
			},success:function(data) { 
				layer.closeAll('loading');
			if(data.num==1){
				layer.alert(
                '新建活动行程成功~', 
                {icon: 1,closeBtn: 0 },
                function () {
                	var  frameindex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                	parent.layer.close(frameindex); //再执行关闭
                	parent.serachUser();
                });
			}else{
				layer.alert('新建活动行程失败~', {
					  icon: 2,
					  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
					});
			}
			},error:function(){
				layer.closeAll('loading');
				layer.alert('网络出现了异常~', {
					  icon: 8,
					  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
					});
            }
		});
};
//添加图片
$('.photo').on('change',function(){
	   var fileName=this.value;
		while (fileName.indexOf("\\") != -1)
		{
	    fileName = fileName.slice(fileName.indexOf("\\") + 1);
		}
	    var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
	    if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
	    {
	    	layer.alert('商品图片格式仅支持PNG、JPG~', {
				  icon: 2,
				  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
				});
	    	return false;
	    }
		var objUrl = getObjectURL(this.files[0]);
		var photoDivId=this.id+"Div";
		$('#photoDiv').append('<div class="col-xs-3 col-md-2" id="'+photoDivId+'"><img class="img-responsive" src="'+objUrl+'" style="position:relative">'
				+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delPhoto('+this.id+')" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
				+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
});
//判断图数量
function addCertificatePhoto(){
	   var flag=false;
		$('.photo').each(function(){
		    if($(this).val()==null||$(this).val()==''){
		    	$(this).click();
		    	flag=true;
		    	return false;
		    }
		  });
		if(!flag){
			layer.alert('商品图片不得大于6张图片~', {
				  icon: 2,
				  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
				});
		}
};
		
	
//删除照片
function delPhoto(file){
	   var fileId=file.id;
		$('#'+fileId).val('');
		$('#'+fileId+"Div").remove();
};
//建立一個可存取到該file的url  
function getObjectURL(file) {
  var url = null ;
  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
  if (window.createObjectURL!=undefined) { // basic  
    url = window.createObjectURL(file) ;  
  } else if (window.URL!=undefined) { // mozilla(firefox)  
    url = window.URL.createObjectURL(file) ;  
  } else if (window.webkitURL!=undefined) { // webkit or chrome  
    url = window.webkitURL.createObjectURL(file) ;  
  }  
  return url ;  
}  
</script>

<script type="text/javascript">
    //实例化编辑器
    var um = UM.getEditor('myEditor');
    um.addListener('blur',function(){
    });
    um.addListener('focus',function(){
    });
</script>

</body>
</html>